<template>
	<view class=" box-sizing " >
<!-- 	<up-navbar title="" @rightClick="{}" :autoBack="true" bgColor = "#fff" placeholder></up-navbar> -->
	<!-- 	<view class="content" style="padding-bottom: 150rpx;" >
			<view class="">
				<view @click="itemClick(item)" :class="item.bookId == clickBookId?'boxBorder1':'boxBorder2'" class="flex bookBox marginBottom-30" v-for="(item,index) in bookList" :key="index">
					<up-image :src="item.pic" width="160rpx" height="210rpx"></up-image>
					<view class="flex column box-sizing paddingLeft-30 height-180 flex-center" style="flex: 1;">
						<view class="flex space-between marginBottom-30">
							<view class="fontSize-28 weight-700">
								{{item.bookname}}
							</view>
						</view>
						<view class="marginBottom-30">
							<view class="fontSize-28">
							</view>
						</view>
						<view class="flex space-between">
							<view class="fontSize-28">
								共{{item.num}}词
							</view>
							<view v-if="item.learn_status>0" class="fontSize-28">
								<span style="color: red;">{{item.learn_status==1?'已学':'正在学'}}</span>
							</view>
						
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="flex">
			<view class="left_btn">
				<view class="tab_btn" v-for="(i,v) in grade_ids" :key="v" :class="current==v?'hover':''"
					@click="tabClick(i,v)">
					{{i.label}}
				</view>
			</view>
			<view class="right paddingTop-20" v-if="bookList.length!=0">
				<view class="right_list flex bookBox" v-for="(item,index) in bookList" :key="index" :class="item.bookId == clickBookId?'boxBorder1':'boxBorder2'" @click="itemClick(item)">
					<image :src="item.pic" mode="" class="main_img"></image>
					<view class="">
						<view class="name">
							{{item.bookname}}
						</view>
						<view class="flex u-flex-between paddingTop-88">
							<view class="pro">
								共{{item.num}}词
							</view>
							<view class="flex items-center" v-if="item.learn_status==2">
								<image src="../../static/image/learn_status.png" mode="" class="status_img"></image>
								<view class="status_tit">
									正在学
								</view>
							</view>
						</view>
					</view>
				</view>
			
			</view>
			<view class="right" v-else>
				<image src="../../static/image/no_book.png" mode="" class="noda_img"></image>
				<view class="noda_title">
					无相关书本，选择其他年级试试！
				</view>
			</view>
		</view>
		<up-gap height="120"></up-gap>
		<view class="fixed" @click="btnClick">
			确认
		</view>
	</view>
</template>

<script setup>
	import { ref,inject } from 'vue'
	import { onReady,onLoad } from '@dcloudio/uni-app'
	const getBookListApi = inject('getBookList');
	const changeBookApi = inject('changeBook');
	const current = ref(0)
	// 创建响应式数据  
	const status = ref('loadmore');
	const list = ref([]);
	const page = ref(1);
	const grade_ids = ref([])
	const grade_id = ref('')
	const defaultBookId = ref(0)
	const bookList = ref([])
	const clickBookId = ref('')
	const getUserInfoApi=inject('getUserInfo')
	onLoad((op) => {
		loginWordCode()
	})
	const loginWordCode = () => {
		getUserInfoApi().then(res => {
			console.log(res,78)
			grade_id.value = res.memberset.grade_id
			getBookList()
		})
	};
	const getBookList = ()=>{
		uni.showLoading({
			title:'加载中'
		})
		getBookListApi({
			grade_id:grade_id.value
		}).then(res=>{
			console.log(res,'ooooooooooo')
		bookList.value = res.bookList
			grade_ids.value=res.grade_ids
			grade_ids.value.forEach((item,index)=>{
				if(item.value==grade_id.value){
					current.value=index
				}
			})
			uni.hideLoading()
		})
	}
	const tabClick = (i, v) => {
		current.value = v
		grade_id.value = i.value
		getBookList()
	}
	// getBookList()
	const btnClick = ()=>{
		if(!clickBookId.value){
			return uni.showToast({
				title:'请先选择课本！',
				icon:'none'
			})
		}
		// uni.navigateBack()
		changeBookApi({book_id:clickBookId.value}).then(res=>{
			console.log(res)
			uni.navigateBack()
		})
	}
	const itemClick = (t) =>{
		console.log(t)
		clickBookId.value = t.bookId
		// t.learn_status = 2
		// defaultBookId.value = t.is
	} 
</script>

<style lang="scss">
.btns{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: calc(50rpx);
	width: 100vw;
}
.bookBox{
	flex: 1;
	position: relative;
	padding: 15rpx;
}
.boxBorder2{
	// border: 2px solid #fff;
}
.boxBorder1{
	transition: all .3s;
	&::before {
		content: "";
		position: absolute;
		inset: -5rpx;
		// top: -0px;
		// left: -0px;
		// right: -10px;
		// bottom: -10px;
		border: 2px solid #51D580;
		border-radius: 10px;
		animation: div5Ani 1s  linear;
	}
	&::after {
	    content: "";
	    position: absolute;
		inset: -5rpx;
	    // top: -10px;
	    // left: -10px;
	    // right: -10px;
	    // bottom: -10px;
	    border: 2px solid #51D580;
	    border-radius: 10px;
	    animation: div5Ani 1s  linear;
	}
	&::after {
		animation: div5Ani 1s  -0.5s linear;
	}
	                        
}

@keyframes div5Ani {
    0%,
    100% {
        clip-path: inset(0 0 98% 0);
    }

    25% {
        clip-path: inset(0 98% 0 0);
    }
    50% {
        clip-path: inset(98% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 98%);
    }
}
	.left_btn {
		width: 176rpx;
		height: 100vh;
		background: rgba(81, 213, 128, .08);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		bottom: 0;

		.tab_btn {
			width: 176rpx;
			height: 104rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			text-align: center;
			line-height: 104rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.hover {
			background: #FFFFFF;
			color: #51D580;
		}
	}

	.right {
		// height: 100vh;
		// overflow-y: auto;
		position: relative;
		left: 177rpx;
		width: 574rpx;

		.right_list {
			padding: 20rpx 32rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #EBEBEB;
			.main_img{
				width: 142rpx;
				height: 196rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 20rpx;
			}
				.name{
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					width: 354rpx;
				}
				.pro{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.status_img{
					width: 36rpx;
					height: 36rpx;
				}
				.status_tit{
					color: linear-gradient(90deg, rgba(81,213,128,0.98) 0%, #51D580 100%);
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					margin-left: 4rpx;
				}
		
		}
	}
	.noda_img{
		width: 160rpx;
		height: 160rpx;
		margin: 300rpx auto 40rpx;
		display: block;
	}
	.noda_title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}
	.fixed{
		width: 702rpx;
		height: 104rpx;
		background: linear-gradient( 180deg, rgba(81,213,128,0.98) 0%, #51D580 100%);
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		text-align: center;
		line-height: 104rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		left: 24rpx;
		bottom: 30rpx;
	}
</style>
